<template>
    <div
        @mousemove="handleMove"
        @mouseleave="handleLeave"
        ref="container"
        class="carousel-item-container"
    >
        <img ref="image" :style="imgPosition" :src="data.bg" alt="" />
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            require: true,
        },
    },
    data() {
        return {
            textWidth: 0,
            containerSize: null,
            imgSize: null,
            mouseX: 0,
            mouseY: 0,
        };
    },
    computed: {
        imgPosition() {
            //如果此时还没有获取完毕尺寸，那么返回空
            if (!this.containerSize || !this.imgSize) return;
            const extraWidth = this.imgSize.width - this.containerSize.width;
            const extraHeight = this.imgSize.height - this.containerSize.height;
            //定位坐标和鼠标坐标是有比例关系的，这个关系是个常数，这个常数本质上由图片与容器的比值决定的
            const x = (-extraWidth / this.containerSize.width) * this.mouseX;
            const y = (-extraHeight / this.containerSize.height) * this.mouseY;
            return {
                transform: `translate(${x}px,${y}px)`,
            };
        },
        center() {
            if (!this.containerSize) return {};
            return {
                x: this.containerSize.width / 2,
                y: this.containerSize.height / 2,
            };
        },
    },
    mounted() {
        //获取内容尺寸
        this.setSize();
        //首次鼠标位置在中央
        this.handleLeave();
        //注册缩放事件更新尺寸信息
        window.addEventListener("resize", this.setSize);
        //获取文本宽度
        // this.textWidth = this.$refs.desc.clientWidth;
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.setSize);
    },
    methods: {
        showWords() {
            this.$refs.desc.style.opacity = 1;
            this.$refs.desc.style.width = 0;
            this.$refs.desc.clientHeight;
            this.$refs.desc.style.width = this.textWidth + "px";
            this.$refs.desc.style.transition = "4s linear";
        },
        //保持内容尺寸始终最新
        setSize() {
            this.containerSize = {
                width: this.$refs.container.clientWidth,
                height: this.$refs.container.clientHeight,
            };
            this.imgSize = {
                width: this.$refs.image.clientWidth,
                height: this.$refs.image.clientHeight,
            };
        },
        handleMove(e) {
            const rect = this.$refs.container.getBoundingClientRect();
            this.mouseX = e.clientX - rect.left;
            this.mouseY = e.clientY - rect.top;
        },
        handleLeave() {
            this.mouseX = this.center.x;
            this.mouseY = this.center.y;
        },
    },
};
</script>

<style lang="less" scoped>
.carousel-item-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: 0.2s;
    img {
        position: absolute;
        left: 0;
        top: 0;
        width: 110%;
        height: 110%;
        transition: 0.2s;
    }
    span {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        top: 200px;
        font-size: 60px;
        z-index: 2;
        color: rgb(214, 109, 225);
        font-family: "楷体";
        border-radius: 10px;
        transform-origin: center center;
        overflow: hidden;
        opacity: 0;
    }
}
</style>
